<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>导航</title>
	<style>
	/*padding一定要加到a标签上，这样点击鼠标范围较大*/
		.header{
		overflow:hidden;
		margin:0;

		}
		img{
			float:left;
		}
		input{
			width:400px;
			height:40px;
			border:none;
			border:1px solid gray;
			border-radius: 8px 0 0 8px;
			border-right:none;
			margin-top: 30px;
			float:left;
		}
		button{
			width:80px;
			height:45px;
			border:none;
			padding: 0;
			margin-top: 30px;
			font:400 20px "微软雅黑";
			border-radius: 0 5px 5px 0;
			float:left;
		}
		ul{
			list-style: none;
			width: 800px;
			height:50px;
			background-color: #7e9c06;
			font:300 20px "宋体";
		}

		li{
			float:left;
			line-height:50px;
			padding:0;
/*			padding:0 10px 0 10px;*/
		}

		a{
			display:inline-block;
			text-decoration: none;
			color:white;
			padding:0;
			padding:0 10px;
		}

		a:hover{
			background-color: #9fbc2c;

		}

	</style>
</head>
<body>
	<div class="header">
		<img src="image/logo.gif">
		<input type="text" placeholder="输入你想查看的内容">	
		</input> 
		<button>搜  索</button>
	</div>
	<div class="banner">
		<ul>
			<li><a href="">首页</a></li>
			<li><a href="">最新图片</a></li>
			<li><a href="">设计原图</a></li>
			<li><a href="">PSD图</a></li>
			<li><a href="">矢量图</a></li>
			<li><a href="">高清图</a></li>
			<li><a href="">原创作品</a></li>
			<li><a href="">PPT</a></li>
			<li><a href="">淘宝素材</a></li>
		</ul>
	</div>
</body>
</html>